import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Button, Row, Col, Empty, Spin, Typography, Badge, Tabs } from 'antd';
import { TeamOutlined, ReloadOutlined, PlusOutlined, CrownOutlined } from '@ant-design/icons';
import NetworkCard from './NetworkCard';

const { Text } = Typography;

const UserNetworksSection = ({ 
  managedNetworks = [],
  joinedNetworks = [],
  managedLoading = false,
  joinedLoading = false,
  onRefreshManaged,
  onRefreshJoined
}) => {
  const navigate = useNavigate();

  // 渲染网络列表内容
  const renderNetworkContent = (networks, isLoading, emptyText, type) => {
    if (isLoading) {
      return (
        <div className="loading-container">
          <Spin size="large" />
          <div className="loading-text">
            <Text type="secondary">加载中...</Text>
          </div>
        </div>
      );
    }

    if (networks.length > 0) {
      return (
        <div className="network-grid">
          <Row gutter={[16, 16]}>
            {networks.map(network => (
              <Col xs={24} sm={12} lg={8} key={network.networkId}>
                <NetworkCard 
                  network={network} 
                  userRole={network.userRole} 
                />
              </Col>
            ))}
          </Row>
        </div>
      );
    }

    return (
      <div className="empty-state-container">
        <div className="empty-icon">
          {type === 'managed' ? <CrownOutlined /> : <TeamOutlined />}
        </div>
        <Text type="secondary">{emptyText}</Text>
        <br />
        {type === 'managed' && (
          <Button 
            type="primary" 
            icon={<PlusOutlined />}
            onClick={() => navigate('/network/create')}
            style={{ marginTop: 16 }}
          >
            创建新局域网
          </Button>
        )}
      </div>
    );
  };

  // 标签页配置
  const tabItems = [
    {
      key: 'managed',
      label: (
        <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <CrownOutlined />
          我管理的局域网
          <Badge 
            count={managedNetworks.length} 
            size="small"
            style={{ backgroundColor: '#52c41a' }}
            showZero
          />
        </span>
      ),
      children: renderNetworkContent(
        managedNetworks, 
        managedLoading, 
        "您还没有管理任何局域网", 
        'managed'
      )
    },
    {
      key: 'joined',
      label: (
        <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <TeamOutlined />
          已加入的局域网
          <Badge 
            count={joinedNetworks.length} 
            size="small"
            style={{ backgroundColor: '#1890ff' }}
            showZero
          />
        </span>
      ),
      children: renderNetworkContent(
        joinedNetworks, 
        joinedLoading, 
        "您还没有加入任何局域网", 
        'joined'
      )
    }
  ];

  return (
    <div className="network-home-content">
      <Card 
        className="network-section"
        style={{ 
          borderRadius: '12px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)'
        }}
      >
        <Tabs
          defaultActiveKey="managed"
          size="large"
          items={tabItems}
          tabBarStyle={{
            marginBottom: '24px',
            borderBottom: '2px solid #f0f0f0'
          }}
          tabBarExtraContent={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button 
                icon={<ReloadOutlined />}
                onClick={() => {
                  onRefreshManaged?.();
                  onRefreshJoined?.();
                }}
                loading={managedLoading || joinedLoading}
                size="small"
                style={{ 
                  borderRadius: '6px',
                  fontWeight: 500
                }}
              >
                刷新全部
              </Button>
            </div>
          }
        />
      </Card>
    </div>
  );
};

export default UserNetworksSection;